<template>
    <div class="Venue_management">

        <!-- 版心 -->
    <div class="Venue_wrap">

        <!-- 头部 -->
     <div class="header">
         <div class="header_top">
             <el-button size="medium" @click.stop="newBuilt">新建</el-button>
         </div>
         <div class="header_bottom">
             <div class="header_left">
                 <p>场馆类型:</p>
                 <el-select v-model="value" @change="lx" placeholder="全部场馆">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
             </div>
             <div class="header_right">
                 <div class="header_ipt">
                           <span class="el-icon-search"></span>
                           <input type="text"  v-model="zfc" placeholder="输入馆名称">
                           <button @click="cx()">查询</button>
                       </div>
             </div>
         </div>
     </div>
        <div class="Venue_content">
            <ul>
                <li v-for="(item,index) in tableData"    v-loading="loading" :key="index">
                   <dl>
                       <dt><img :src=item.photo alt=""></dt>
                       <dd>
                           <div class="content_data">
                               <p>营业时间</p>
                               <span>{{item.open_time}}</span>
                           </div>
                           <div class="content_phone">
                               <p>前台座机</p>
                               <span>{{item.gym_phone}}</span>
                           </div>
                       </dd>
                   </dl>
                   <p class="list"><span>场馆：</span>{{item.gym_name}}</p>
                   <p class="icon"><span>定位：</span>{{item.gym_address}}</p>
                   <div class="content_edit">
                       <ol>
                           <li @click.stop="edit(item.id)"><span class="el-icon-edit"></span></li>
                           <li @click="sc(item.id)"><span class="el-icon-delete"></span></li>
                       </ol>
                   </div>
                   <div class="content_line"></div>
                </li>
            </ul>
        </div>
      <div style="float:right;margin-right:27%;margin-top:-1.5%">
            <!-- <el-pagination
            :pager-count="10"
             @current-change='yemian'
            :current-page='yeshu'
            layout="prev, pager, next"
            :total="zshu">
            </el-pagination> -->
               <el-pagination
        @current-change='yemian'
        :current-page='yeshu'
        layout="prev, pager, next"
        :total='zshu'>
        </el-pagination>
      </div>
    </div>
        <!-- 版心结束 -->


          <!-- 新建场馆 -->
        <div class="newBuilt"  v-show="addActive">
            <div class="add_owner">
                <div class="add_top">
                    <p>新建场馆</p>
                   <span class="el-icon-circle-close" @click.stop="hide"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>场馆名称：</span>
                            <el-input v-model="mc" placeholder="请输入场馆名称"></el-input>
                        </li>
                        <li>
                            <span>场馆类型：</span>
                            <el-select v-model="value1"  placeholder="全部场馆">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </li>
                         <li  @click="dz()" >
                                <span>场馆地址：</span>
                            <el-input v-model="this.$route.query.dz" placeholder="请输入场馆地址"></el-input>
                        </li>
                         <li>
                            <span>营业时间：</span>
                            <el-time-picker
                                is-range
                                v-model="value4"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </li>
                          <li>
                            <span>座机电话：</span>
                            <el-input v-model="dh" placeholder="请输入座机电话"></el-input>
                        </li>
                          <li style="position: relative;">
                           <span>上传照片：</span>
                           <div style="width: 50px;height: 50px;background:red;overflow: hidden;">
                               <img :src="image" style="width:100%;height:100%" alt="">
                           </div>
                           <span style="font-size: 9px;"><input type="file" id="file" @change="imageChange()" style="opacity: 0;top: 18px;z-index: 999;left:38%;position: absolute;"><span style="top: 18px;left:38%;position: absolute">上传图片</span></span>
                        </li>
                        <li>
                             <span>上传视频：</span>
                             <!-- <video style="height:auto;" src="" id="video0" controls="controls"></video>     -->
                            <input  v-if="vid" @change="sp()" class="form-control" type="file" style="height:auto;" id="video" name="video"/>
                             <div v-if="vids">视频上传成功</div>
                             <!-- <input type="file" id='sp' accept="video/*;capture=camcorder"  @change="sp()"> -->
                             <!-- <input id="input-repl-3a" @change="sp()" name="videoFileAddress" type="file" accept="mp4,avi,dat,3gp,mov,rmvb" /> -->
                        </li>
                        <li style="margin-top:30px;">
                            <span></span>
                            <ol>
                                  <li v-for="(item,index) in tag" :key="index">
                                        <p>{{item}}</p>
                                        <i class="el-icon-close" @click="sctag(index,item)"></i>
                                    </li>
                                </ol>
                        </li>
                        <li>
                            
                        </li>
                        <li style="margin-top:0;">
                            <span>场馆标签：</span>
                            <div class="view">
                                 <!-- <el-input v-model="tas" maxlength=4 style="width: 83%;border: none;height: 29px;" ></el-input> -->
                                <input v-model="tas" maxlength=4 type="text" style="width: 83%;border: none;height: 29px;outline:none;">
                               <el-button @click="tjtas()" style="height:30px;background:#666666;" type="info" size="small" round>添加</el-button>
                            </div>
                        </li>
                          <li style="width:100%;margin-top:15px;">
                            <span style="width:23%;"></span>
                            <div class="label">
                                <div class="label_top">
                                    <i class="fa fa-caret-right" v-if="see" @click="dk"></i>
                                    <i class="el-icon-caret-bottom" @click="gz" v-if="seen3"></i>
                                    <font>查看推荐标签</font>
                                </div>
                                <div class="label_list" v-if="seen3">
                                    <ul>
                                        <li v-for="(item,index) in tags" :key="index">
                                            <i @click="tjtags(item,index)" class="el-icon-plus"></i>
                                            <span>{{item}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div @click="qdtj()" class="add_submit">确认添加</div>
            </div>
        </div>
        <div class="newBuilt"  v-show="addActives">
            <div class="add_owner">
                <div class="add_top">
                    <p>修改场馆</p>
                   <span class="el-icon-circle-close" @click.stop="hides"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>场馆名称：</span>
                            <el-input v-model="mc" placeholder="请输入场馆名称"></el-input>
                        </li>
                        <li>
                            <span>场馆类型：</span>
                            <el-select v-model="value1"  placeholder="全部场馆">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </li>
                         <li  @click="dz()" >
                                <span>场馆地址：</span>
                            <el-input v-model='dzcw' placeholder="请输入场馆地址"></el-input>
                        </li>
                         <li>
                            <span>营业时间：</span>
                            <el-time-picker
                                is-range
                                v-model="value4"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                            </el-time-picker>
                        </li>
                          <li>
                            <span>座机电话：</span>
                            <el-input v-model="dh" placeholder="请输入座机电话"></el-input>
                        </li>
                          <li style="position: relative;">
                           <span>上传照片：</span>
                           <div style="width: 50px;height: 50px;background:red;overflow: hidden;">
                               <img :src="image" style="width:100%;height:100%" alt="">
                           </div>
                           <span style="font-size: 9px;"><input type="file" id="img" @change="imgChange()" style="opacity: 0;top: 18px;z-index: 999;left:38%;position: absolute;"><span style="top: 18px;left:38%;position: absolute">上传图片</span></span>
                        </li>
                        <li>
                             <span>上传视频：</span>
                             <!-- <video style="height:auto;" src="" id="video0" controls="controls"></video>     -->
                            <input   @change="sps()" class="form-control" type="file" style="height:auto;" id="videos" name="video"/>
                             <!-- <div v-if="vids">视频上传成功</div> -->
                             <!-- <input type="file" id='sp' accept="video/*;capture=camcorder"  @change="sp()"> -->
                             <!-- <input id="input-repl-3a" @change="sp()" name="videoFileAddress" type="file" accept="mp4,avi,dat,3gp,mov,rmvb" /> -->
                        </li>
                        <li style="margin-top:30px;">
                            <span></span>
                            <ol>
                                  <li v-for="(item,index) in tag" :key="index">
                                        <p>{{item}}</p>
                                        <i class="el-icon-close" @click="sctag(index,item)"></i>
                                    </li>
                                </ol>
                        </li>
                        <li>
                            
                        </li>
                        <li style="margin-top:0;">
                            <span>场馆标签：</span>
                            <div class="view">
                                 <el-input v-model="tas" maxlength=4 style="width: 83%;border: none;height: 29px;" ></el-input>
                                <!-- <input type="text" style="width: 83%;border: none;height: 29px;"> -->
                               <el-button @click="tjtas()" style="height:30px;background:#666666;" type="info" size="small" round>添加</el-button>
                            </div>
                        </li>
                        <li style="width:100%;margin-top:15px;">
                            <span style="width:23%;"></span>
                            <div class="label">
                                <div class="label_top">
                                    <i class="fa fa-caret-right" v-if="see" @click="dk"></i>
                                    <i class="el-icon-caret-bottom" @click="gz" v-if="seen3"></i>
                                    <font>查看推荐标签</font>
                                </div>
                                <div class="label_list" v-if="seen3">
                                    <ul>
                                        <li v-for="(item,index) in tags" :key="index">
                                            <i @click="tjtags(item,index)" class="el-icon-plus"></i>
                                            <span>{{item}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div @click.stop="qdtjs" class="add_submit">确认修改</div>
            </div>
        </div>
        <!-- 新建场馆结束-->
        
    </div>
</template>
<script>
export default {
    data(){
        return{
        options: [{
          value: '游泳健身',
        }, {
          value: '健身房',
        }, {
          value: '瑜伽馆',
        }],
        value: '',
        yeshu:1,
        value1:'',
        input:'',
        zfc:'',
        tas:'',
        mc:'',
        dh:'',
        zshu:'',
        see:true,
        seen3:false,
         lng:this.$route.query.lng,
        lat:this.$route.query.lat,
        dzcw:this.$route.query.dz,
        image:this.$route.query.image,
        video:this.$route.query.video,         
        value4: [new Date(), new Date()],
        addActive:false,
        addActives:false,
        tableData:'',
        tag:[],
        vid:true,
        xg:'',
        vids:false,
        tags:['交通便利','环境好','动感单车','有氧操课','无氧器械','运动氛围好','课程多样','教练专业']
        }
    },
    created(){
        this.ajax()
        // console.log(this.$route.query.video == '')
        if(this.$route.query.mc != undefined){
            this.mc=this.$route.query.mc 
        }
        if(this.$route.query.newTime != undefined){
            this.newTime=JSON.parse(this.$route.query.newTime)
        }
        if(this.$route.query.dh != undefined){
            this.dh=this.$route.query.dh
        }
        if(this.$route.query.tag != undefined){
            this.tag=this.$route.query.tag
        }
        if(this.$route.query.value1 != undefined){
            this.value1=this.$route.query.value1
        }
        if(this.$route.query.video != undefined){
            this.vid=false,
            this.vids=true
            console.log(this.$route.query.video)
        }
        if(this.$route.query.lat != undefined){
           this.addActive=true
        }
    },
    methods:{
        dk(){
            this.seen3=true
            this.see=false
        },
        gz(){
             this.seen3=false
            this.see=true
        },
        yemian(yeshu){
            // alert(yeshu)
            this.ajax('',yeshu)
        },
        sp(){
               setTimeout(() => {
                   var _this=this
                  var sp=document.getElementById('video')
                  var objUrl = getObjectURL(sp.files[0]) ;
                function getObjectURL(file) {
                var formData = new FormData();    
                formData.append("video", file);
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadShowvideo",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                //   console.log(result)
                 if (result.code == 1) {
                     _this.$message({
                        type: 'success',
                        message: '视频上传成功!'
                    });
                    console.log(result)
                    _this.video=result.data
                 }else{
                      _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                 }
                }
                });
                }
               },1000)
        },
          sps(){
               setTimeout(() => {
                   var _this=this
                  var sp=document.getElementById('videos')
                  var objUrl = getObjectURL(sp.files[0]) ;
                function getObjectURL(file) {
                var formData = new FormData();    
                formData.append("video", file);
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadShowvideo",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                //   console.log(result)
                 if (result.code == 1) {
                     _this.$message({
                        type: 'success',
                        message: '视频上传成功!'
                    });
                    console.log(result)
                    _this.video=result.data
                 }else{
                      _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                 }
                }
                });
                }
               },1000)
        },
         imageChange: function() {
            setTimeout(() => {
                var _this = this;
                var file = document.getElementById("file").files[0];
                // console.log(document.getElementById("file"));
                var formData = new FormData();
                formData.append("image", file);
                console.log(formData);
                let obj = {
                //请求的参数
                formData: formData
                };
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadimage",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                    if (result.message == "文件路径生成成功") {
                    // mui.toast("图片上传成功");
                       _this.$message({
                        type: 'success',
                        message: '图片上传成功!'
                    });
                      _this.image = result.data;
                    } else if (result.code == "-1") {
                    // mui.toast(result.message);
                        _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                    }
                }
                });
            });
        },
        imgChange(){
           setTimeout(() => {
                var _this = this;
                var file = document.getElementById("img").files[0];
                // console.log(document.getElementById("file"));
                var formData = new FormData();
                formData.append("image", file);
                console.log(formData);
                let obj = {
                //请求的参数
                formData: formData
                };
                $.ajax({
                url: "http://yogahome.top/yujia/admin/uploadimage",
                xhrFields: {
                    withCredentials: true
                },
                type: "POST",
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                async: false,
                success: function(result) {
                    if (result.message == "文件路径生成成功") {
                    // mui.toast("图片上传成功");
                       _this.$message({
                        type: 'success',
                        message: '图片上传成功!'
                    });
                      _this.image = result.data;
                    } else if (result.code == "-1") {
                    // mui.toast(result.message);
                        _this.$message({
                        type: 'error',
                        message: '上传失败!'
                    });
                    }
                }
                });
            });
        },
        qdtj(){
        if(this.tag != ''){
            var array=this.tag
            var num
            for (let i = 0; i < array.length; i++) {
            num=array[i]+','+num
            }
            num=num.substring(0,num.indexOf("undefined")-1) 
        }
        var newDate= times(this.value4[0])
        var outDate=times(this.value4[1])
        function times(time){
            var d = new Date(time);
            var year = d.getFullYear();
            var month = d.getMonth();
            var day = d.getDate();
            var hours = d.getHours();
            var min = d.getMinutes();
            if(month < 10){
                month=month+'0'
            }
             if(min < 10){
                min=min+'0'
            }
            return hours+':'+min
        }
        let obj = {
            gymName:this.mc,
            gymAddress:this.$route.query.dz,
            lng:this.$route.query.lng,
            lat:this.$route.query.lat,
            gymPhone:this.dh,
            openTime:newDate+'~'+outDate,
            tag:num,
            gymType:this.value1,
            photo:this.image,
            video:this.video
        }
        // console.log(obj)
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/addYogaGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                // console.log(_this)
                  _this.ajax()
                  _this.$router.push({
                        path: "/Venue_management"
                        });
                  _this.addActive=false      
            }else{
                 _this.$message({
                    type: 'error',
                    message: '添加失败!'
                });
            }
        })
        .catch(function(error) {
            console.log(error);
        });
        },
    dz(){
        this.$router.push({
            path: "/LocationSearchdw",
            query: {
                video:this.video,
                mc:this.mc,
                newTime:JSON.stringify(this.value4),
                dh:this.dh,
                tag:this.tag,
                value1:this.value1,   
                image:this.image,
            }
        })
    },
    tjtas(){
         if(this.tas== ''){
                this.$message({
                    message: '字段不可为空',
                    type: 'warning'
                    });
               return
           }else{
               for (var i=0;i< this.tag.length;i++){
                        if(this.tas == this.tag[i]){
                            this.$message({
                            type: 'warning',
                            message: '标签不可重复',
                            
                            });
                            this.tas=''
                           return
                    }
                }   
           }
        this.tag.push(this.tas)
        this.tas=''
    },
    tjtags(item,dx){
        this.tag.push(item)
         Array.prototype.delete=function(delIndex){
                var temArray=[];
                for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                temArray.push(this[i]);
                }
                }
                return temArray;
                }
                var aa=this.tags
                aa.delete(dx)
                this.tags=aa.delete(dx)
    },
    sctag(dx,item){
         for(var i=0;i<this.tag.length;i++){
                    if(dx == i){
                        this.tags.push(this.tag[i])
                    }
            }
         Array.prototype.delete=function(delIndex){
                var temArray=[];
                for(var i=0;i<this.length;i++){
                if(i!=delIndex){
                temArray.push(this[i]);
                }
                }
                return temArray;
                }
                var aa=this.tag
                aa.delete(dx)
                this.tag=aa.delete(dx)
    },
    ajax(value,yeshu){
        let obj = {
            type:value,
            page:yeshu,
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            console.log(response.data.data)
            _this.zshu=response.data.data[0]
            _this.tableData=response.data.data[1]
             if(response.data.data[1]== ''){
                _this.$message({
                    message: '暂无该馆',
                    type: 'warning'
                    });     
               _this.ajax()     
               return
           }
            _this.loading=false
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    lx(){
         this.ajax(this.value)
        //   setTimeout(()=>{
        //         var arr=$('.el-pager').find('li')
        //         for (var i=0;i<arr.length;i++){
        //             console.log(arr[i].style.color='black')
        //         }
        //         $('.el-pager').children()[0].style.color='#409EFF'
        //   })
    },
    cx(){
          if(this.zfc== ''){
                this.$message({
                    message: '手机号不可为空',
                    type: 'warning'
                    });
               return
           }
         this.ajax(this.zfc)
    },
    sc(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let obj = {
             gymId:id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/deleteYogaGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
           if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '删除失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
       
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    newBuilt(){
        this.addActive = true;

    },
    hide(){
        this.addActive = false;
    },
     hides(){
        this.addActives = false;
    },
    qdtjs(){
         var _this=this
         if(_this.tag != ''){
            var array=_this.tag
            var num
            for (let i = 0; i < array.length; i++) {
            num=array[i]+','+num
            }
            num=num.substring(0,num.indexOf("undefined")-1) 
        }    
        var newDate= times(_this.value4[0])
        var outDate=times(_this.value4[1])
        function times(time){
            var d = new Date(time);
            var year = d.getFullYear();
            var month = d.getMonth();
            var day = d.getDate();
            var hours = d.getHours();
            var min = d.getMinutes();
             if(month < 10){
                month=month+'0'
            }
             if(min < 10){
                min=min+'0'
            }
            return hours+':'+min
        }
        let obj1 = {
            gymId:_this.xg,
            gymName:_this.mc,
            gymAddress:_this.dz,
            lng:_this.lng,
            lat:_this.lat,
            gymPhone:_this.dh,
            openTime:newDate+'~'+outDate,
            tag:num,
            gymType:_this.value1,
            photo:_this.image,
            video:_this.video
        }
        console.log(obj1)
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/updateYogaGymInfoBySuperAdmin", qs.stringify(obj1), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
            if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                // console.log(_this)
                  _this.$router.push({
                        path: "/Venue_management"
                        });
                     _this.ajax()
                  _this.$router.push({
                        path: "/Venue_management"
                    });
                  _this.addActives=false      
            }else{
                 _this.$message({
                    type: 'error',
                    message: '修改失败!'
                });
            }
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    edit(id){
        this.addActives = true;
        this.xg=id
        let obj = {
            gymId:id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findYogaGymOneBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then((response) =>{
            _this.mc=response.data.data.gym_name
            _this.dzcw=response.data.data.gym_address
            _this.value1=response.data.data.gym_type
            _this.lat=response.data.data.lat
            _this.lng=response.data.data.lng
            _this.dh=response.data.data.gym_phone
            _this.image=response.data.data.photo
            _this.tag=response.data.data.tags
            _this.video=response.data.data.video
        })
        .catch(function(error) {
            console.log(error);
        });





    }
    }
}
</script>
<style scoped>
.Venue_management{
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    position: absolute;
    left: 250px;
    top: 0;
    z-index: 2;
}
/* 版心 */
.Venue_wrap{
    width: 100%;
height: 100%;
margin-left: 3%;
}
.el-select {
    display: inline-block;
    position: relative;
    width: 100%;
}
.Venue_wrap .header{
      width: 100%;
    margin-top: 35px;
}
.Venue_wrap .header .header_top .el-button--medium{
    width: 90px;
    height: 34px;
    background: #2871e9;
}
.el-button{
    color: #fff
}
.Venue_wrap .header .header_bottom{
      width: 100%;
   display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cdcdcd;
}
.Venue_wrap .header .header_bottom .header_left{
     display: flex;
    align-items: center;

}
.Venue_wrap .header .header_bottom .header_left .el-select{
    width:160px;
    margin-left: 5px;
}
.Venue_wrap .header .header_bottom .header_left p{
    font-size: 16px;
    color: #000;
}
.Venue_wrap .header .header_bottom .header_right{
    display: flex;
    align-items: center;
    margin-right:22%
}
.Venue_wrap .header .header_bottom .header_right .header_ipt{
     height: 30px;
    background: #dfdfdf;
    border-radius: 15px;
    display: flex;
    align-items: center;
    margin-left: 27px!important;
}
.Venue_wrap .header .header_bottom .header_right .header_ipt span{
      display: inline-block;
    color: #b9b9b9;
    margin-left: 10px;
}
.Venue_wrap .header .header_bottom .header_right .header_ipt input{
      border: none;
      height: 30px;
    outline: none;
    background: #dfdfdf;
    margin-left: 5px;
}
.Venue_wrap .header .header_bottom .header_right .header_ipt button{
    width: 55px;
    height: 26px;
    line-height:26px;
     padding: 0 10px;
    border: none;
    border-radius: 15px;
    background: #2e7bfb;
    font-size: 14px;
    color: #ffffff;
}
/* 版心结束 */

/* 内容 */

.Venue_content{
    width: 78%;
    margin-top: 25px;

}
.Venue_content>ul{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}
.Venue_content>ul li{
    width: 260px;
    border-radius: 6px;
    background: #fff;
    margin-right: 25px;
    margin-bottom: 38px;

       box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
}
.Venue_content>ul li dl{
    width: 100%;
    display: flex;
       padding: 0 22px;
    margin-top: 30px;
    padding-bottom: 20px;
}
.Venue_content ul li dl dt{
    width: 90px;
    height: 90px;
    background: #444444;
}
.Venue_content ul li dl dt img{
      width: 90px;
    height: 90px;
}
.Venue_content ul li dl dd{
    padding-left: 15px;
}
.Venue_content ul li dl dd .content_data p{
    font-size: 12px;
    color: #606060;
}
.Venue_content ul li dl dd .content_data span{
    font-size: 14px;
    color: #000000;
}
.Venue_content ul li dl dd .content_phone{
    margin-top: 14px;
}
.Venue_content ul li dl dd .content_phone p{
    font-size: 12px;
    color: #606060;
}
.Venue_content ul li dl dd .content_phone span{
    font-size: 14px;
    color: #000000;
}
.Venue_content ul li>p{
    font-size: 14px;
    color: #000;
}
.Venue_content ul li>p span{
    font-size: 12px;
    color: #606060;
}
.Venue_content ul li .list,.Venue_content ul li .icon{
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
   padding: 0 22px;
}
.Venue_content ul li .icon{
    margin-top: 5px;
}
.Venue_content ul li .content_edit {
    width: 100%;
     padding: 0 22px;
    margin-top: 30px;
    padding-bottom: 15px;
     

}
.Venue_content ul li .content_edit ol{
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Venue_content ul li .content_edit ol li{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eeeeee;
    padding: 0!important;
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.Venue_content ul li .content_edit ol li:nth-child(2){
       margin-left: 30px;
}
/* 线条 */

/* 线条结束 */
.Venue_content ul li .content_line{
    width: 100%;
    height: 8px;
    background: #95baf8;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

}
/* 内容结束 */
/* 添加馆主*/
.newBuilt{
    width:100%;
    height:100%;
    position: absolute;
    left:-250px;
    top:0%;
    z-index:5;
    background:rgba(0,0,0,0.4)

}
.newBuilt .add_owner{
    width:560px;
    background:#fff;
    margin:10px auto;
    border-radius:6px;
    box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, .1);
    padding:0 40px;
    padding-bottom:40px;
}
.newBuilt .add_owner .add_top{
 width:100%;
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:40px;
}
.newBuilt .add_owner .add_top p{
    font-size:20px;
    padding-bottom:5px;
    border-bottom:3px solid #286fe6;
    color:#000;
    font-weight:bold;
}
.newBuilt .add_owner .add_top span{
    font-size:18px;
    display: inline-block;
}
.newBuilt .add_owner .add_bottom{
    width:100%;
}
.newBuilt .add_owner .add_bottom>ul{
    width:100%;
}
.newBuilt .add_owner .add_bottom>ul>li{
    width:94%;
     display: flex;
    align-items: center;
    margin-top:35px;

}
.newBuilt .add_owner .add_bottom>ul>li>span{
    display: inline-block;
    width:25%;
    font-size:16px;
    color:#000000;
}
.newBuilt .add_owner .add_bottom ul>li ol{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.newBuilt .add_owner .add_bottom ul>li ol li{
     display: flex;
    align-items: center;
    background: url(../../assets/images/venue_management/venue_03.png) no-repeat;
    background-size: 100% 100%;
    padding: 3px 10px;
    font-size: 13px;
    color: #fff;
    margin-right: 12px;
    margin-bottom: 10px;
}
.newBuilt .add_owner .add_bottom ul>li ol li i{
    margin-left: 15px;
}
.newBuilt .add_owner .add_bottom ul>li  .view{
    width: 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid #cdcdcd;
    text-align: right;
}
.newBuilt .add_owner .add_bottom ul>li .label{
    width:100%;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top{
    width: 100%;
    display: flex;
    align-items: center;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top i{
    color: #aaaaaa;
}
.newBuilt .add_owner .add_bottom ul>li .label .label_top font{
    font-size: 14px;
    color: #444444;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list{
    width: 100%;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li{
     padding: 5px 0;
   padding-right: 16px;
   padding-left: 8px;
  
    margin-top: 10px;
    background: url(../../assets/images/venue_management/venue_07.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 12px;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li i{
    font-size: 12px;
    color: #b4b4b4;
}
.newBuilt .add_owner .add_bottom ul>li>.label>.label_list>ul>li span{
    font-size: 12px;
    color: #606060;
}
.newBuilt .add_owner .add_submit{
    width:52%;
    height:40px;
    line-height:40px;

    margin:0 auto;
    text-align:center;
    background:#2f7dfe;
    border-radius:4px;
    margin-top:40px;
    font-size:16px;
    color:#fff;
}

/* 添加馆主结束 */
</style>
<style>
    .el-date-editor .el-range-separator {
    width: 8%!important;
}
.el-range-editor.el-input__inner {
    width: 100%;
  
}
</style>


